.video-item {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 6px;
    background-color: #fff;
    padding-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.09);

        .delete-btn {
            opacity: 1;
        }

        .video-cover::after {
            opacity: 0.1;
        }

        .video-title {
            color: #00aeec;
        }
    }

    .video-cover {
        position: relative;
        width: 100%;
        overflow: hidden;
        cursor: pointer;
        border-radius: 0;
        margin-bottom: 8px;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0;
            transition: opacity 0.3s;
        }

        img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .video-duration {
            position: absolute;
            bottom: 6px;
            right: 6px;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 0 4px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 1;
        }
    }

    .video-info {
        padding: 0 10px;

        .video-title {
            font-size: 14px;
            color: #18191c;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
            max-height: 40px;
            cursor: pointer;

            &:hover {
                color: #00aeec;
            }
        }

        .video-data {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #9499a0;

            .video-author {
                margin-bottom: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .delete-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 2;

        &:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .delete-icon {
            width: 14px;
            height: 14px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    }
}